假設我們已經建立了vue cli的project，只要引入對應的vue router package就可以使用了。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      name: '元件的名稱',
      path: '路徑',
      component: 'import元件的物件'
    },
  ] 
})

import router from '剛剛處理路由的js檔'
new Vue({
  el: '#app',
  template: '<App/>',
  router
})

上面的程式碼中，我們透過export router，就可以在main.js這個應用程式的路口進行全域引用。

router-view & router-link

import One from '@/components/One'
import Two from '@/components/Two'
export default new VueRouter({
  routes: [
    {
      path: '/One',
      component: One
    },
    {
      path: '/Two',
      component: Two
    }
  ]
})
<!-- App.vue -->
<script>
import One from '@/components/One'
import Two from '@/components/Two'
export default {
  components: {
    One,
    Two
  }
}
<script/>
<template>
  <div>
    <nav>
      <router-link to="/One">One<router-link/>
      <router-link to="/Two">One<router-link/>
    <router-view/>
  <div>
<template/>

import完之後，我們在透過router view及 router link渲染路由對應的組件。
router-link會負責切換路徑的連結。

這是最基本的路由切換，不過我們在寫網頁時並不會是這麼簡單的狀況，我們常常看到url上會顯示
xxx/xxx/1
或是
xxx/xxx?id=xxx

路由的1或是id後面的xxx都是動態傳入的參數，就不能hard code了，這種狀況我們明天再介紹。

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#